PC端
移动端：
一、微信端：
1)公众号（H5页面）（信用卡、银行卡、移动联通等通过公众号接入等页面）
2)小程序：就是一个前端框架(需要等掌握ui框架 + MVVM框架)
二、App端：
ios
android
混合应用开发Hybird App
三、H5端：例如 易企秀、H5商城（就是使用H5标准编写一个手机页面）
核心技术 ：Html + Css + JavaScript
开发一套适用5端。
总结：所谓端移动端开发，就是开发适用于手机的网页。
------------------------------------------------------------------
PC端与移动端区别：
1.设备的屏幕 - 》页面布局
2.分辨率（设备品牌型号种类繁多）=》 屏幕适配
3.输入特性（操作方式）=》 事件
4.性能：手机性能普遍比pc差
移动端页面布局相比pc端而言简洁、主要问题在于处理事件、屏幕适配。
-------------------------------------------------------------------
专业术语：
1.设备像素（物理像素）：
设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了。
屏幕宽、高的像素点数量
2.设备像素比（DPR）devicePixelRatio：设置物理像素与逻辑像素比例，（js中可以获取：window.devicePixelRatio）
3.设备分辨率(DPI)：单位英寸中所包含的像素点（物理像素点数量并不一定根据屏幕尺寸决定）
4.逻辑像素：布局像素（css布局中的像素）
视网膜屏(retina):视觉效果非常高清
原理：1个逻辑像素通过2个单位的物理像素来呈现。
苹果设备：一般dpr 2
iphone6 : 物理像素： 750 * 1334
因为设备的dpr2 ，一个逻辑像素需要两个物理像素来呈现，所以iphone6中屏幕最大的布局像素为： 750 / 2 = 375
dpr常见值： 1 （低端机） 、 2（普遍） 、 3（少有型号，魅族、三星、mi）
视口：各种可视区域的宽度。
-布局视口：window.innerWidth 获取 布局时的宽度（981）
-视觉视口：设备的宽度，screen.width 获取（375）
-理想视口：让布局视口和视觉视口一样大小，页面就不会缩小或放大。
移动端开发必须添加一个视口标签。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
常见网页单位：
px
em
rem
pt
vw: viewwidth 按百分比算 100%
vh: viewheight
-------------------------------------------------------------
一般的网站会有pc与移动端：
移动端实现方案：
百分比布局
自适应布局
响应式布局：一套页面，可以适用于pc也可以适用于移动端（手机、平板）页面布局
优点：一套开发，降低开发、维护成本
缺点：开发复杂、内容会出现冗余，性能会有所降低
场景：一般页面布局结构简单，呈块状，内容简单
移动端开发技术：
-弹性盒子：
-媒体查询：缺点，繁琐（屏幕尺寸太多规格，需要做很多的匹配）
-手淘方案：flexible（其实也是使用rem的原理实现）
实际开发过程中，一般的设计稿按照iphone6尺寸设计（750px宽度的psd设计稿）
-rem：相对于根元素的字体大小设置
手机m站：除了一套pc页面，还有一套针对于移动端端页面（两套）。
两套网站缺点:
1.开发成本高（开发用时、用人）
2.维护成本高
优点：性能高
场景：在pc内容结构复杂时，使用m站相对有优势。
-------------------------------------------------------------
移动开发使用的技术：
媒体查询：通过css媒体查询设备信息，做出不同的布局样式，从而实现设备的适配与响应式布局
弹性盒子：代替以前定位、浮动布局的一种新方案。
-------------------------------------------------------------
APP:移动端应用
1.ios(objective-c /swift) 、 android（原生应用 native , java）（前端直接略过）：
优点：性能、体验高（最佳）
缺点：开发成本高、升级（更新）维护难、不能跨平台
2.H5 web 开发（将网页直接打包成web app ，使用的移动端上的webview运行的）
优点：开发成本（学习成本）、维护成本低、可以跨平台开发（写一套页面，直接打包成安卓、苹果）
缺点：性能低、体验差、功能受限制
3.Hybird App 混合应用（热门）
优点：性能比web版高、开发成本低、维护方便、跨平台开发，可以使用大量的原生功能（相机、文件操作、录音、定位...）
缺点：暂时没有明显
实现技术：
1.开发安卓： 安装安卓的开发环境（1.java JDK \ 2.Android Studio）、模拟器（运行app）
工具：
1.cordova (扩展框架)上手难度高
2.HBuilder（编辑器+提供在线打包服务(不需要自己搭环境)、HB公司下MUI框架 + (H5+ 提供部分原生功能) 开发混合）没有门槛
------------------------------------------------------------------
数字天堂 ：
开发工具： Hbuilder
H5+标准（混合应用框架标准）
提供MUI（UI框架）（做页面布局的框架）
-----------------------------------------------------------------
移动端js交互事件：
因为设备的类型不一样，操作方式不同，事件与pc自然不同。
移动设备操作：
1.触摸
2.长按
3.上下左右滑动
4.双击触摸
pc端事件：
1.鼠标悬停、离开、按下、起来（x）
2.单击（可用，会比移动端原生触摸事件延迟300ms）
zepto.js (移动端jQuery)：
1.简化dom操作
2.简化事件处理
3.简化ajax操作
4.方便的动画特效函数
移动端还需要针对性的框架（提供效率）：
技术选型：选择框架原则，就是简单高效，完善文档、稳定的迭代更新。
1.轮播图 ： swiper
2.下拉刷新：isScroll =》 api地址： https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/gettingstart.html
3.上拉加载更多
4.滑动回弹效果
fullpage /